<template>
  <view class="home-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="iconfont icon-zhinanzhen"></text>
        <input type="text" placeholder="搜索医院/科室/医生" />
      </view>
    </view>
    
    <!-- 快捷功能区 -->
    <view class="quick-nav">
      <view class="nav-item" @tap="navigateTo('/pages/hospital/list')">
        <text class="iconfont icon-yiyuan"></text>
        <text>找医院</text>
      </view>
      <view class="nav-item" @tap="navigateTo('/pages/department/list')">
        <text class="iconfont icon-zhongzhengkeshi"></text>
        <text>找科室</text>
      </view>
      <view class="nav-item" @tap="navigateTo('/pages/doctor/list')">
        <text class="iconfont icon-yisheng"></text>
        <text>找医生</text>
      </view>
      <view class="nav-item" @tap="navigateTo('/pages/guide/index')">
        <text class="iconfont icon-zhinanzhen"></text>
        <text>就医指南</text>
      </view>
    </view>
    
    <!-- Tab筛选条件 -->
    <view class="filter-tabs">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'all' }"
        @tap="switchTab('all')"
      >
        全部医院
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 'level' }"
        @tap="switchTab('level')"
      >
        按等级筛选
        <text class="iconfont icon-arrow-down" v-if="currentTab === 'level'"></text>
      </view>
    </view>
    
    <!-- 医院列表 -->
    <scroll-view class="hospital-list" scroll-y>
      <view class="hospital-item" v-for="hospital in hospitals" :key="hospital.id" @tap="goToHospital(hospital.id)">
        <image class="hospital-logo" :src="hospital.logo" mode="aspectFill"></image>
        <view class="hospital-info">
          <view class="hospital-name">{{ hospital.name }}</view>
          <view class="hospital-tags">
            <text class="tag">{{ hospital.level }}</text>
            <text class="tag">医保定点</text>
          </view>
          <view class="address">
            地址：{{ hospital.address }}
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 等级筛选picker -->
    <picker 
      v-show="currentTab === 'level'"
      :range="levelOptions" 
      range-key="label"
      @change="onLevelChange"
      :value="levelIndex"
    >
    </picker>
  </view>
</template>

<script>
import { getHospitalList, getHospitalsByLevel } from '@/api/hospital'

export default {
  data() {
    return {
      hospitals: [],
      currentTab: 'all',
      levelIndex: 0,
      levelOptions: [
        { label: '三甲医院', value: '三甲' },
        { label: '三乙医院', value: '三乙' }
      ]
    }
  },
  onLoad() {
    this.getHospitals()
  },
  methods: {
    async getHospitals() {
      try {
        const res = await getHospitalList()
        console.log('医院列表响应：', res)
        if (Array.isArray(res)) {
          this.hospitals = res
        } else {
          uni.showToast({
            title: '获取医院列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取医院列表错误：', error)
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none'
        })
      }
    },
    navigateTo(url) {
      uni.navigateTo({ url })
    },
    async switchTab(tab) {
      if (this.currentTab === tab) return
      
      this.currentTab = tab
      if (tab === 'all') {
        // 获取全部医院
        const res = await getHospitalList()
        this.hospitals = res
      } else {
        // 显示等级选择器
        uni.showActionSheet({
          itemList: this.levelOptions.map(item => item.label),
          success: async (res) => {
            const selected = this.levelOptions[res.tapIndex]
            const result = await getHospitalsByLevel(selected.value)
            this.hospitals = result
            this.levelIndex = res.tapIndex
          },
          fail: () => {
            this.currentTab = 'all'
          }
        })
      }
    },
    async onLevelChange(e) {
      const index = e.detail.value
      const selected = this.levelOptions[index]
      this.levelIndex = index
      
      try {
        const res = await getHospitalsByLevel(selected.value)
        this.hospitals = res
      } catch (error) {
        uni.showToast({
          title: '获取医院列表失败',
          icon: 'none'
        })
      }
    },
    goToHospital(id) {
      console.log('goToHospital', id)
      uni.navigateTo({
        url: `/pages/hospital/detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss">
.home-container {
  height: calc(100vh - 44px - 50px);
  background: #f5f5f5;
  
  .search-bar {
    padding: 20rpx;
    background: #fff;
    
    .search-input {
      display: flex;
      align-items: center;
      background: #f5f5f5;
      border-radius: 32rpx;
      padding: 0 30rpx;
      height: 72rpx;
      
      .iconfont {
        font-size: 36rpx;
        color: #666;
        margin-right: 10rpx;
      }
      
      input {
        flex: 1;
        font-size: 28rpx;
      }
    }
  }
  
  .quick-nav {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 30rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .iconfont {
        font-size: 60rpx;
        color: #007AFF;
        margin-bottom: 10rpx;
      }
      
      text:last-child {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
  
  .filter-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1rpx solid #eee;
    padding: 0 30rpx;
    height: 88rpx;
    
    .tab-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #666;
      margin-right: 48rpx;
      height: 100%;
      
      &.active {
        color: #007AFF;
        font-weight: 500;
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background: #007AFF;
          border-radius: 2rpx;
        }
      }
      
      .iconfont {
        font-size: 24rpx;
        margin-left: 4rpx;
      }
    }
  }
  
  .hospital-list {
    flex: 1;
    padding: 20rpx;
    
    .hospital-item {
      display: flex;
      padding: 30rpx;
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      
      .hospital-logo {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      
      .hospital-info {
        flex: 1;
        
        .hospital-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 12rpx;
        }
        
        .hospital-tags {
          margin-bottom: 12rpx;
          
          .tag {
            display: inline-block;
            font-size: 24rpx;
            color: #666;
            background: #f5f5f5;
            padding: 4rpx 12rpx;
            border-radius: 4rpx;
            margin-right: 12rpx;
          }
        }
        
        .address {
          font-size: 26rpx;
          color: #999;
        }
      }
    }
  }
}
</style> 